/**
 * @Date 2023-02-21 10:03:49
 * @Remark
 */

// react
import React, { useState } from "react";
import { Button, Input, Modal, Space, Table } from "antd";
import { observer } from "mobx-react";
// lib
import { state } from "./state";
import { confirmOutRecord } from "./controller";
import { MODAL_STYLE } from "project/config";

const TableColumns = [
  {
    title: "借阅ID",
    dataIndex: "skuId",
  },
  {
    title: "用户ID",
    dataIndex: "userId",
  },
  {
    title: "副本ID",
    dataIndex: "copyId",
  },
  {
    title: "图书名称",
    dataIndex: "title",
  },
  {
    title: "ISBN",
    dataIndex: "isbn",
  },
];

function EditModal() {
  const [InputValue, setInputValue] = useState("");
  const confirmOut = () =>{
    
    confirmOutRecord(Number(InputValue),setInputValue)
  }
  const inpuChange = (e:any) =>{
    setInputValue(e.target.value)
  }
  return (
    <Modal
      title={"新增出库"}
      open={state.editModalShow}
      onCancel={() =>{state.currentOutList = []; state.editModal = false}}
      onOk={() =>{state.currentOutList = []; state.editModal = false}}
      width={MODAL_STYLE.COL2}
      destroyOnClose
      maskClosable
      forceRender
      okButtonProps={{
        loading: state.editModalLoading,
      }}
    >
    <Space direction="vertical" size="middle">
    <Space.Compact style={{ width: '100%' }}>
      <Input placeholder="请输入或扫码图书" value={InputValue} onChange={inpuChange} />
      <Button disabled={InputValue.length === 0} type="primary" onClick={confirmOut}>确认出库</Button>
    </Space.Compact>
    </Space>
      <Table
        className="main-table"
        columns={TableColumns}
        loading={state.loading}
        dataSource={state.currentOutList}
        bordered
        rowKey="id"
        scroll={{ x: "max-content" }}
      />
    </Modal>

  );
}

export default observer(EditModal);
